@charset "UTF-8";

// Triangle
// 四个方向的三角形 top,right,bottom,left
// Usage: @include triangle(right, 10px, #000);
// -------------------------------------------------------

@mixin triangle($direction, $size, $borderColor ) {
  content:"";
  height: 0;
  width: 0;
  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  }
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  }
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
  @else if $direction == topleft {
    border-top:$size solid $borderColor;
    border-right:$size dashed transparent;
  }
  @else if $direction == topright {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
  }
  @else if $direction == bottomleft {
    border-bottom:$size solid $borderColor;
    border-right:$size dashed transparent;
  }
  @else if $direction == bottomright {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
  }
}
